<template>
	<view>
		<view v-if="list.name==null&&empty==1">
			<u-empty       text="未查询到信息"    icon="https://cdn.uviewui.com/uview/empty/history.png"></u-empty>
		</view>
		<view v-else   class="contents">
			<view class="contents_box">
				<!-- <view class="contents_basic_img">
					<u--image radius="4" :src="src"  width="80px" height="80px"></u--image>
				</view> -->
				
				<view class="contents_basic">
					<view class="block">
					    <view>
							<image mode="aspectFill" :src="list.avatar"></image>
						</view>
					</view>
				    <u-form labelWidth="70">
						<u-row  gutter="20">
							<u-col span="6">
								<u-form-item label="姓名:"	borderBottom>
									<input border="none" v-model="list.name"	placeholder="无" disabled></input> 
								</u-form-item>
							</u-col>
							<u-col span="6">
								<u-form-item label="年龄:"	borderBottom>
									<input border="none" v-model="list.age"	placeholder="无" disabled></input> 
								</u-form-item>
							</u-col>
						</u-row>
						<u-row  gutter="20">
							<u-col span="6">
								<u-form-item label="性别:"	borderBottom labelWidth="70">
								   <input border="none" :value="sex(list.gender)"	placeholder="无" disabled></input> 
								</u-form-item>
							</u-col>
							<u-col span="6">
								<u-form-item label="等级:"	borderBottom>
									<input border="none" v-model="list.level"	placeholder="无" disabled></input> 
								</u-form-item>
							</u-col>
						</u-row>
						
						
						<u-form-item label="工作评分:"	borderBottom>
							<input border="none" v-model="list.jobRating"	placeholder="无" disabled></input> 
						</u-form-item>
						<u-form-item label="入职时间:"	borderBottom>
							<input border="none" :value="utils.dateFormat(list.onBoardTime)"	placeholder="无" disabled></input> 
						</u-form-item>
						<u-form-item label="从业时间:"	borderBottom>
							<input border="none" v-model="list.workingTime"	placeholder="无" disabled></input> 
						</u-form-item>
						<u-form-item label="开户行:"	borderBottom>
							<input border="none" v-model="list.bankName"	placeholder="无" disabled></input> 
						</u-form-item>
						<u-form-item label="银行账号:"	borderBottom>
							<input border="none" v-model="list.bankAccount"	placeholder="无" disabled></input> 
						</u-form-item>
						<u-form-item label="联系电话:"	borderBottom>
							<input border="none" v-model="list.mobile"	placeholder="无" disabled></input> 
						</u-form-item>
						<u-form-item label="身份证号:"	borderBottom >
							<input border="none" v-model="list.idNumber"	placeholder="无" disabled></input> 
						</u-form-item>
						<!-- <u-form-item label="驻点门店:"	borderBottom>
							<input border="none" v-model="list.storeName"	placeholder="无" disabled></input> 
						</u-form-item> -->
				        <u-form-item label="星级评定:"	borderBottom>
							<u-rate :value="list.starRating" active-color="#ffd02b"></u-rate>
				        </u-form-item>
						<u-form-item label="技能:"	borderBottom>
							<!-- <input border="none" v-model="list.skill"	placeholder="无" disabled></input> -->
							<span>
								{{ getSkillName(list.skill) }}
							</span>
						</u-form-item>
						
				    </u-form>
				</view>
			</view>
			
			
			
			
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';  
import json from '../../json';
	export default {
		data() {
			return {
				empty:0,
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				basic:{Sex:""},
				attend:{},
				list:{},
				fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
				managementList:[],
			}
		},
		computed: {
			//获取是否登录
			...mapState(['userInfo']) 
		},
		onLoad() {
			this.show();
			this.showManagement()
		},
		methods: {
			navigateTo(){
				uni.navigateTo({
				   url: "/pages/service/my/personalEdit"
				});
			},
			show() {
				this.request.getRequest(this.http.httpsLian.getTechnician,{id:this.userInfo.id})
				.then(res => { 
					console.log("技师信息："+JSON.stringify(res.data))
					this.empty=1
					this.list=res.data
					//let skillIds = res.data.skill.split(',').filter(id => id !== '');
					console.log("技师技能skillIds："+skillIds)
				}).catch(res => {
					//uni.$u.toast(res)
				})	
			},
			//查询技师技能
			showManagement(){
				this.request.getRequest(this.http.httpsLian.getCategoryList,{parentId: 28})
				.then(res => { 
					console.log("查询技师技能："+JSON.stringify(res.data))
					this.managementList=res.data
				}).catch(res => {
					//uni.$u.toast(res)
				})	
			},
			getSkillName(skill) {
			  // 去掉前后逗号
			  skill = skill.replace(/^,|,$/g, '');
			  
			  let skillIds = skill.split(',').filter(id => id !== '');
			 // console.log("去掉前后逗号："+)
			  let skillNames = skillIds.map(id => {
				  //console.log("去掉前后逗号："+JSON.stringify(this.managementList))
			    let category = this.managementList.find(item => item.id === parseInt(id));
				console.log("去掉前后逗号："+JSON.stringify(category))
			    return category ? category.name : '';
			  });
			  return skillNames.join(',');
			},
			sex(id){
				switch (id){
					case 1:
						return "男";
					case 2:
						return "女";	
					default:
						return "参数错误";
				}
				
			}
		}
		
	}
</script>

<style lang="scss">
  .contents{
	  //margin: 30rpx;
  }
  .contents_box{
	  background-color: white;
	  padding: 20rpx;
	  margin-bottom: 30rpx;
  }
  .contents_basic_img{
	  width: 165rpx;
	 // background-color: aquamarine;
	  margin: 0px auto;
  }
  .block{
	  image{
		  width: 400rpx;
		  height: 400rpx;
	  }
	   //background-color: red;
	  view{
		   width: 400rpx;
		  margin: 0px auto;
		  background-color: yellowgreen;
	  }
	 
  }
</style>
